<template>
  <div class="app-container">
    <div class="content">
      <el-form @submit.native.prevent ref="userRef" label-width="120px">
        <el-row class="row" v-for="(item, index) in typeList" :key="index" :gutter="20">
          <el-col :span="8" >
            <el-form-item label="充值：">
              <el-input
                type="number"
                v-model="item.rechargeMoney"
                placeholder="请输入"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2"> 元 兑换 </el-col>
          <el-col :span="8">
            <el-form-item label="渡币：">
              <el-input
                type="number"
                v-model="item.bdMoney"
                placeholder="请输入"
                :min="1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2"> 个 </el-col>
          <el-col :span="4">
            <el-button type="primary" size="small" @click="submitForm(item)"
              >修改</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
    
<script setup name="coin">
import { queryRechargePage, editRecharge } from "@/api/recharge";
const { proxy } = getCurrentInstance();
const typeList = ref([]);
const loading = ref(true);
/** 查询列表 */
const getList = () => {
  loading.value = true;
  queryRechargePage().then((res) => {
    loading.value = false;
    typeList.value = res.rows;
    console.log(typeList.value)
  });
};

/** 提交按钮 */
const submitForm = (e) => {
  editRecharge({
    id: e.id,
    rechargeMoney: e.rechargeMoney,
    bdMoney: e.bdMoney,
  }).then((response) => {
    proxy.$modal.msgSuccess("编辑成功");
    getList();
  });
};

getList();
</script>
<style lang='scss' scoped>
.content {
  width: 1000px;
  margin: 50px auto;
}
.row{
  line-height:30px;
}
.footer {
  display: flex;
  justify-content: right;
}
.hint {
  color: #999;
}
</style>
    